<template>
  <div class="login-page">
    <div class="login-box">
      <h1>妈了个巴子</h1>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item :label="'密\xa0\xa0\xa0\xa0码'" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captchacode">
          <div class="captcha-box">
            <el-input v-model.number="ruleForm.captchacode"></el-input>
            <img height="40" :src="codeImg" alt="" @click="getCode" />
          </div>
        </el-form-item>
        <el-form-item id="btn-box">
          <el-button class="btn" type="primary" @click="submitForm('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { validateusername } from "@/utils/validate";
import { getCodeApi, LoginApi } from "../../request/api";
import {mapMutations,mapActions} from "vuex"
export default {
  data() {
    return {
      ruleForm: {
        username: "qdtest1",
        password: "123456",
        captchacode: "888888",
      },
      rules: {
        username: [
          {
            required: true, //必填项
            message: "用户名不能为空", //提示语
            trigger: "blur",
          },
          //自定义校验的写法
          { validator: validateusername, trigger: "blur" },
        ],
        password: [
          {
            required: true, //必填项
            message: "密码不能为空", //提示语
            trigger: "blur",
          },
        ],
        captchacode: [
          {
            required: true, //必填项
            message: "验证码不能为空", //提示语
            trigger: "blur",
          },
        ],
      },
      codeImg: "",
    };
  },
  created() {
    this.getCode();
    this.changeMenuData([])
  },
  methods: {
    ...mapMutations({
changeMenuData:"userMenuData/changeMenuData"
    }),
    ...mapActions({
asyncChangeUserInfo:"userInfo/asyncChangeUserInfo"
    }),
    async getCode() {
      let res = await getCodeApi();
      console.log(res);
      if (!res) return;
      this.codeImg = "data:image/gif;base64," + res.data.img;
      localStorage.setItem("captcha-uuid", res.data.uuid);
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await LoginApi({
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            code: this.ruleForm.captchacode,
            uuid: localStorage.getItem("captcha-uuid"),
          });
          console.log(res);
          if (!res) return;
          //提示登陆成功
          this.$message({
            message: "登录成功，即将跳转",
            type: "success",
          });
          //清除uuid
          localStorage.removeItem("captcha-uuid");
          // 保存token
          localStorage.setItem("edb-authorization-token",res.data.token)
          //跳转首页
          this.$router.push("/")
          //获取用户信息
         this.asyncChangeUserInfo()
          //   alert("submit!");
        } else {
          this.$message({
            message: "请输入正确信息",
            type: "warning",
          });

          return false;
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.login-page {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/loginBg.jpg") center top no-repeat;
  .login-box {
    width: 440px;
    height: 330px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px 0 0;
    border-radius: 20px;
    h1 {
      text-align: center;
      margin-bottom: 20px;
      padding-left: 40px;
      font-size: 20px;
    }
    .btn {
      width: 100%;
    }
    .captcha-box {
      display: flex;
      img {
        width: 100px;
        margin-left: 20px;
      }
    }
    ::v-deep #btn-box .el-form-item__content {
      margin-left: 40px !important;
    }
  }
}
</style>